<template>
	<view>
		<view>
			<view class="video-wrap">
				<video class="myVideo" id="myVideo" :poster="poster" :src="src" @error="videoErrorCallback"
					:danmu-list="danmuList" enable-danmu danmu-btn controls></video>
			</view>
			<!-- #ifndef MP-ALIPAY -->
			<view class="uni-list uni-common-mt">
				<view class="uni-list-cell">
					<view>
						<view class="uni-label">弹幕内容</view>
					</view>
					<view class="uni-list-cell-db">
						<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
					</view>
				</view>
			</view>
			<view class="uni-btn-v">
				<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://vd3.bdstatic.com/mda-pj64nbwpkad4vqch/sc/cae_h264/1696652544181278192/mda-pj64nbwpkad4vqch.mp4?v_from_s=bdapp-unicomment-suzhou',
				poster: 'https://gimg3.baidu.com/search/src=http%3A%2F%2Fcontentcms-bj.cdn.bcebos.com%2Fcmspic%2Fd7d0f2eec0187b35e9f54996fe5e4c01.jpeg%3Fx-bce-process%3Dimage%2Fcrop%2Cx_212%2Cy_0%2Cw_1144%2Ch_766%2Fformat%2Cf_auto&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1696784400&t=2661c5165a6484ec9ed7aa6d0e1f28b1',
				danmuList: [{
						text: '第 1s 出现的弹幕',
						color: '#ff0000',
						time: 1
					},
					{
						text: '第 3s 出现的弹幕',
						color: '#ff00ff',
						time: 3
					}
				],
				danmuValue: ''
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		methods: {
			sendDanmu: function() {
				this.videoContext.sendDanmu({
					text: this.danmuValue,
					color: this.getRandomColor()
				});
				this.danmuValue = '';
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			}
		}
	}
</script>


<style lang="scss" scoped>
	.myVideo {
		width: 100%;
	}
</style>